<template>
	<div ref="$el" class="my-corner-mark" :class="classes">
		<div class="my-corner-mark_wrapper">
			<slot></slot>
		</div>
	</div>
</template>

<script setup name="MyCornerMark">
/**
 * 角标
 * @module components/my-corner-mark
 */
/**
 * 插槽
 * @member slots
 * @property {String} default 内容
 */
/**
 *属性参数
 * @member props
 * @property {String} [type=primary] 颜色，支持'primary', 'success', 'warning', 'danger','info'
 * @property {String} [size] 尺寸，支持 'large', '', 'small',
 * @property {String, HTMLElement} [target] 添加到目标的选择器
 */
const props = defineProps({
	type: {
		type: String,
		default: 'primary',
		validator(val) {
			return ['primary', 'success', 'warning', 'danger', 'info'].includes(val);
		}
	},
	size: {
		type: String,
		default: '',
		validator(val) {
			return ['large', '', 'small'].includes(val);
		}
	},
	target: {}
});

const classes = computed(() => ({
	[`is-${props.size}`]: !!props.size,
	[`is-${props.type}`]: !!props.type
}));

let targetEl,
	$el = shallowRef(null);
onMounted(() => {
	targetEl = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
	if (targetEl) targetEl.appendChild($el.value);
});
onBeforeUnmount(() => {
	if (targetEl) targetEl.removeChild($el.value);
});
</script>

<style lang="scss" scoped>
.my-corner-mark {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	width: 100px;
	height: 100px;
	overflow: hidden;
	transform: translate(50%, -50%);

	.my-corner-mark_wrapper {
		position: absolute;
		top: 50%;
		width: 100%;
		height: 24px;
		line-height: 24px;
		color: var(--el-color-white);
		text-align: center;
		background: var(--el-color-primary);
		box-shadow: var(--el-box-shadow-base);
		transform: translateY(-50%) rotate(45deg);
	}
}

.is-success .my-corner-mark_wrapper {
	color: var(--el-color-success-light-9);
	background: var(--el-color-success);
}

.is-warning .my-corner-mark_wrapper {
	color: var(--el-color-warning-light-9);
	background: var(--el-color-warning);
}

.is-danger .my-corner-mark_wrapper {
	color: var(--el-color-danger-light-9);
	background: var(--el-color-danger);
}

.is-info .my-corner-mark_wrapper {
	color: var(--el-color-info-light-9);
	background: var(--el-color-info);
}

.is-large {
	top: 30px;
	right: 30px;
	width: 130px;

	.my-corner-mark_wrapper {
		height: 30px;
		font-size: 16px;
		line-height: 30px;
	}
}

.is-small {
	top: 14px;
	right: 14px;
	width: 80px;

	.my-corner-mark_wrapper {
		height: 20px;
		font-size: 12px;
		line-height: 20px;
	}
}
</style>
